<script setup>
import {ref} from "vue"
const layout = ref([])
const isEdit = ref(false)
const handleEdit = ()=>{
  isEdit.value = !isEdit.value
}
const gridlayout= ref(null)
const getRandomKey = () => {
  return Math.random().toString(16).substring(2, 8)
}
const handleAdd = ()=>{
  const id = getRandomKey()
  layout.value.push(
    {
      i: id,
      x: 2,
      y: 2,
      h: 1,
      w: 2,
      // comp:defineAsyncComponent(() => import(item.path))

    }
  )
}
</script>

<template>
  <div class="demo-wrap">
    <div class="demo-content">
      <div class="demo-title">
        <div class="demo-btn" @click="handleEdit">
          {{ isEdit ? '保存' : '编辑' }}
        </div>
        <div class="demo-btn" @click="handleAdd" v-if="isEdit">
          添加
        </div>
      </div>
      <Teleport to="#app">
        <div class="demo-left">
        <grid-layout v-if="isEdit" ref="gridlayout" class="num" :auto-size="false" :layout.sync="layout" :col-num="16"
            :row-num="6" :margin="[0, 0]" :colWidth="95" :maxRows="6" :rowHeight="65" :responsive="false"
            :preventCollision="true" :is-draggable="true" :is-resizable="false" :use-css-transforms="true"
            :verticalCompact="false">
            <grid-item ref="itemref" :key="item.i" :id="item.i" v-for="(item, index) in layout" :x="item.x" :y="item.y"
              :w="item.w" :h="item.h" :i="item.i">
              <div class="grid-item-son"></div>
            </grid-item>
          </grid-layout>
        </div>
    </Teleport>
    </div>
  </div>

</template>

<style scoped>
.demo-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
}
.demo-content {
  /* height: 450px;
  width: 1600px; */
  height: 225px;
  width: 800px;
  background-color: rgb(224, 219, 238);
  transform: scale(2);

}

.demo-title {
  text-align: right;
  width: 100%;
  /* height: 47px; */
  height: 23.5px;
  background-color: rgb(244, 208, 212);
  position: relative;
}
.demo-left {
  box-sizing: border-box;
  width: 1600px;
  height: 407px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top:125px;
  left: 50%;
  transform: translateX(-50%);

  height:407px;
  z-index: 999;

}
.num{
  border: 2px solid #000
}
.demo-btn {
  height: 15px;
  background-color: rgb(27, 160, 53);
  display: inline-block;
  color: #fff;
  padding: 0 5px;
  line-height: 15px;
  border-radius:2px;
  font-size: 8px;
  margin: 0 5px;


}
.grid-item-son{
  height: 100%;
  width: 100%;
  background-color: brown;
}
</style>